<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小学智能出题判卷系统</title>
    <!-- Bootstrap CSS -->
    <link href="/common/styles/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.staticfile.net/bootstrap-icons/1.11.3/font/bootstrap-icons.css"
        type="text/css" rel="stylesheet" />
    <!-- 自定义样式 -->
    <link href="css/style.css" rel="stylesheet">
    <!-- 打印样式 -->
    <link href="css/print.css" rel="stylesheet" media="print">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">小学智能出题判卷系统</a>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <!-- 出题区域 -->
            <div class="col-md-12 mb-4">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">出题设置</h5>
                    </div>
                    <div class="card-body">
                        <form id="exam-form">
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <label for="grade" class="form-label">年级</label>
                                    <select class="form-select" id="grade" required>
                                        <option value="" selected disabled>请选择年级</option>
                                        <option value="1">一年级</option>
                                        <option value="2">二年级</option>
                                        <option value="3">三年级</option>
                                        <option value="4">四年级</option>
                                        <option value="5">五年级</option>
                                        <option value="6">六年级</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="subject" class="form-label">科目</label>
                                    <select class="form-select" id="subject" required>
                                        <option value="" selected disabled>请选择科目</option>
                                        <option value="math">数学</option>
                                        <option value="chinese">语文</option>
                                        <option value="english">英语</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="difficulty" class="form-label">难度</label>
                                    <select class="form-select" id="difficulty" required>
                                        <option value="" selected disabled>请选择难度</option>
                                        <option value="easy">简单</option>
                                        <option value="medium">中等</option>
                                        <option value="hard">复杂</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="count" class="form-label">题目数量</label>
                                    <input type="number" class="form-control" id="count" min="1" max="30" value="5" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label">题目类型</label>
                                <div id="question-types" class="row">
                                    <!-- 题型选择区域，将由JS动态生成 -->
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary" id="generate-exam">生成试卷</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 试卷区域 -->
            <div class="col-md-12 mb-4">
                <div class="card" id="exam-paper-container" style="display: none;">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">试卷</h5>
                        <div>
                            <button class="btn btn-light btn-sm me-2 print-button" id="print-exam">
                                <i class="bi bi-printer"></i> 打印试卷
                            </button>
                            <button class="btn btn-light btn-sm" id="submit-exam">提交答案</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="exam-paper">
                            <!-- 试卷内容将在这里动态生成 -->
                        </div>
                    </div>
                </div>
            </div>

            <!-- 判卷结果区域 -->
            <div class="col-md-12">
                <div class="card" id="result-container" style="display: none;">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">判卷结果</h5>
                    </div>
                    <div class="card-body">
                        <div id="exam-result">
                            <!-- 判卷结果将在这里动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载中提示 -->
    <div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center p-4">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <h5 id="loading-message">正在生成试卷，请稍候...</h5>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="/common/scripts/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="/common/scripts/bootstrap.bundle.min.js"></script>
    <!-- 自定义脚本 -->
    <script src="js/app.js"></script>
    <!-- 打印功能修复脚本 -->
    <script src="js/print-fix.js"></script>
</body>
</html>